<eda-dialog [inject]="dialog">

  <div body class="grid">
    <div class="col-8">
      <div class="eda-chart-panel" style="margin-top: 6em;">
        <div style="height: 70%; background-color: var(--panel-color); margin: 2em;">
          <panel-chart *ngIf="display" style="margin: 1em;" #PanelChartComponent [props]="panelChartConfig">
          </panel-chart>
        </div>
      </div>
    </div>


    <div class="grid col-4">

      <div class="col-6">

        <h6 i18n="@@colorsChartH6" class="custom-border-b1">
          Colores
        </h6>

        <div class="chart-color-selection">
          <div class="mb-1">
            <input type="text" [(ngModel)]="color" pInputText style="width: 40%" (keyup)="handleInputColor()" />
            <p-colorPicker [(ngModel)]="color" appendTo="body" (onChange)="handleInputColor()"></p-colorPicker>
            <!-- <input type="text" pInputText class="eda-color-pick" (input)="handleInputColor()" minlength="7"> -->
          </div>
        </div>

      </div>

      <div class="col-6" *ngIf="!limitInQuery">

        <h6 i18n="@@Limits" class="custom-border-b1">
          Limites
        </h6>

        <div class="mb-1">
          <input type="number" [(ngModel)]="min" pInputText placeholder="min" />
        </div>
        <div class="mb-1">
          <input type="number" [(ngModel)]="max" pInputText placeholder="max" />
        </div>

      </div>

    </div>
  </div>


  <div footer>
    <div class="ui-dialog-buttonpanel ui-widget-content ui-helper-clearfix text-right">
      <button type="submit" pButton (click)="saveChartConfig()" icon="fa fa-check" class="p-button-raised p-button-success"
        i18n-label="@@guardarButton" label="Confirmar" id="eda_chart_dialog_confirmar">
      </button>
      <button type="button" pButton (click)="closeChartConfig()" icon="fa fa-times" class="p-button-raised p-button-danger"
        i18n-label="@@cancelarButton" label="Cancelar">
      </button>
    </div>
  </div>


</eda-dialog>